import React, { useEffect, FC } from "react";
import * as echarts from "echarts";
import type { DoubleYAxisBubbleChartProps } from "@/types/echartInterface";
import { EChartsOption, EChartsResponsiveOption } from "echarts";

const DoubleYAxisBubbleChart: FC<DoubleYAxisBubbleChartProps> = (props) => {
  const { bubbleOption, bubbleStyle } = props;
  useEffect(() => {
    const chartDom = document.getElementById("chart") as HTMLElement;
    const myChart = echarts.init(chartDom);
    const {
      legendList = [],
      dataNetworkStrength,
      dataOfflineTimes,
      colorList = [],
    } = bubbleOption;
    const option: EChartsOption = {
      title: {
        text: "",
      },
      tooltip: {
        formatter: function (params: any) {
          return (
            params.data[3] +
            "<br/>" +
            "当日设备网络强度: " +
            params.data[0] +
            "<br/>" +
            "当日设备离线次数: " +
            params.data[1]
          );
        },
      },
      legend: {
        data: legendList,
      },
      xAxis: {
        show: false,
      },
      yAxis: [
        {
          type: "value",
          name: "设备网络强度分布情况",
          nameLocation: "middle",
          nameTextStyle: {
            color: "#000",
          },
          nameRotate: -90,
          nameGap: 40,
          position: "left",
          interval: 20,
          max: 40,
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
          axisLabel: {
            formatter: function (value: number) {
              if (value <= 6 && value >= 0) return "0 | 6";
              else if (value <= 20 && value > 6) return "7 | 20";
              else {
                return "20以上";
              }
            },
            rotate: 90,
            color: "#000",
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        {
          type: "value",
          name: "设备离线分布情况",
          nameLocation: "middle",
          nameGap: 40,
          nameRotate: -90,
          nameTextStyle: {
            color: "#000",
          },
          position: "right",
          min: 0,
          max: 6,
          interval: 3,
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
          axisLabel: {
            formatter: function (value: number) {
              if (value <= 1 && value >= 0) return "0 | 1";
              else if (value <= 4 && value > 1) return "2 | 4";
              else {
                return "4以上";
              }
            },
            rotate: 90,
            color: "#000",
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
      ],
      series: [
        {
          name: "当日设备网络强度",
          type: "scatter",
          data: dataNetworkStrength,
          symbolSize: function (data: any) {
            return Math.sqrt(data[2]) / 5e2;
          },
          itemStyle: {
            shadowBlur: 0,
            shadowOffsetY: 0,
            opacity: 0.6,
            // @ts-ignore
            color: new echarts.graphic.RadialGradient(0.5, 0.61, 0.5, [
              {
                offset: 0,
                color: "#fff",
              },
              {
                offset: 1,
                color: colorList[0],
              },
            ]),
          },
          emphasis: {
            focus: "series",
            label: {
              show: true,
              formatter: function (param: any) {
                return param.data[3];
              },
              position: "top",
            },
          },
        },
        {
          name: "当日设备离线次数",
          type: "scatter",
          data: dataOfflineTimes,
          symbolSize: function (data: any) {
            return Math.sqrt(data[2]) / 5e2;
          },
          itemStyle: {
            shadowBlur: 0,
            shadowOffsetY: 0,
            opacity: 0.6,
            // @ts-ignore
            color: new echarts.graphic.RadialGradient(0.5, 0.61, 0.5, [
              {
                offset: 0,
                color: "#fff",
              },
              {
                offset: 1,
                color: colorList[1],
              },
            ]),
          },
          yAxisIndex: 1,
          emphasis: {
            focus: "series",
            label: {
              show: true,
              formatter: function (param: any) {
                return param.data[3];
              },
              position: "top",
            },
          },
        },
      ],
    };
    myChart.setOption(option as EChartsResponsiveOption);
    const resizeChart = () => {
      myChart.resize();
    };

    window.addEventListener("resize", resizeChart);
    return () => {
      window.removeEventListener("resize", resizeChart);
      myChart.dispose();
    };
  }, [bubbleOption]);

  return <div id="chart" style={bubbleStyle}></div>;
};

export default DoubleYAxisBubbleChart;
